<template>
    <div class="flex_col card2 m5 p10">
        <label class="flex_center_self">数码管控制</label>
        <div class="flex_row_center mt5">
            <label>上层:</label>
            <el-input v-model="ctx.top" clearable style="width: 100px;"/>
            <el-button @click="onClickTop" type="primary" class="ml5">控制</el-button>
        </div>
        <div class="flex_row_center mt5">
            <label>下层:</label>
            <el-input v-model="ctx.bottom" clearable style="width: 100px;"/>
            <el-button @click="onClickBottom" type="primary" class="ml5">控制</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { runAction } from '../utils/ui';
import { service } from '../service/service';


interface Ctx {
    top: string,
    bottom: string,
}

const ctx = reactive<Ctx>({
    top: '0',
    bottom: '0',
})

async function onClickTop() {
    runAction('上层LED', '控制', async () => {
        await service.numLedCtrl(1, parseInt(ctx.top));
    });
}

async function onClickBottom() {
    runAction('下层LED', '控制', async () => {
        await service.numLedCtrl(2, parseInt(ctx.bottom));
    });
}

</script>
